/*
 * @Author: Zhang Kai
 * @Date: 2022-05-28 02:00:47
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-14 11:01:09
 * @FilePath: /metricsx-standard-ui/src/views/indexMarket/components/indexTag/index.tsx
 */
import {
  defineComponent,
  onMounted,
  PropType,
  reactive,
  watch,
  ref
} from 'vue';
import { ElMessage } from 'element-plus/lib/index';
import infoIcon from '@/assets/images/info.svg';
import CustomIcon from '@/components/customicon/custom-icon';
import './index.scss';
const indexTag = defineComponent({
  name: 'indexTag',
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['exports', 'collection', 'check', 'click'],
  setup: (props, { slots, attrs, emit }) => {
    const checked = ref(false);
    return () => {
      const { info } = props;
      return (
        <div onClick={(e: any) => emit('click')} class="indexTag-container">
          <div class="indexTag-title">
            <div class="indexTag-title-left">
              <el-checkbox
                onClick={(e: any) => e.stopPropagation()}
                onChange={() => emit('check', info)}
                v-model={checked.value}
              />
              <div class="indexTag-title-text">{info?.cnName}</div>
            </div>
            <div class="indexTag-title-right">
              <el-tooltip
                popper-class="indexTag-title-info"
                v-slots={{
                  content: () => (
                    <>
                      <div>业务负责人：{info?.businessOwner}</div>
                      <div>技术负责人：{info?.techOwner}</div>
                      <div>授权人：{info?.authorizer}</div>
                    </>
                  )
                }}
                placement="bottom"
              >
                <img src={infoIcon} alt="" />
              </el-tooltip>
            </div>
          </div>
          <div class="indexTag-text">业务含义：{info?.businessMeaning}</div>
          <div class="indexTag-footer">
            <div class="indexTag-footer-left">
              <div>浏览 {info?.browseNumber}</div>
              <div>使用 {info?.useNumber}</div>
              <div>收藏 {info?.collectNumber}</div>
            </div>
            <div
              onClick={(e: any) => e.stopPropagation()}
              class="indexTag-footer-right"
            >
              <CustomIcon
                onClick={(e: any) => {
                  e.stopPropagation();
                  emit('exports');
                }}
                name="icon-metricsx-daochu"
                color="#B9BECB"
              />
              <CustomIcon
                onClick={(e: any) => {
                  e.stopPropagation();
                  emit('collection')
              }}
                name="icon-metricsx-shoucang"
                color={info?.favoriteStatus ? '#1F68FF' : '#BABECA'}
              />
            </div>
          </div>
        </div>
      );
    };
  }
});

export default indexTag;
